@import "~basscss/css/basscss.css";
@import "./themes/dark.css";
@import "./themes/light.css";

@import "./accents/blue.css";
@import "./accents/red.css";
@import "./accents/purple.css";

@font-face {
  font-family: OpenSans;
  src: url('~open-sans-fontface/fonts/Regular/OpenSans-Regular.woff2');
}

@font-face {
  font-family: OpenSans;
  src: url('~open-sans-fontface/fonts/Light/OpenSans-Light.woff2');
  font-weight: 100;
}

:root {
  --font-family: OpenSans, sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--theme-selected-start);
  background-clip: content-box;
  border: 2px transparent solid;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  border-color: var(--theme-selected-start);
  border-radius: 0;
}

body, html {
  font-family: var(--font-family);
}

h1, h2 {
  font-weight: normal;
}

a {
  color: var(--theme-bookmark-link-color);
}

a:hover {
  color: var(--theme-bookmark-link-hover-color);
}

.container-background {
  background: var(--container-bg-color);
}

.overlay {
  position: absolute;
  z-index: 2;
  height: 100vh;
  width: 100vw;
  background: var(--main-bg-color);
  color: var(--theme-header-color);
}

.font-light {
  font-weight: 100;
}

.input {
  color: var(--input-text-color);
  font-size: 24px;
  height: 80px;
  line-height: 80px;
  outline: none;
  caret-color: var(--theme-selected-start);
}

.overlay-title {
  font-size: 32px;
}

.big-link {
  font-size: 24px;
}

.icon {
  width: 24px;
  height: 24px;
}

.icon path {
  transition: fill 0.3s;
  fill: var(--theme-bookmark-link-color);
}

.icon:hover path  {
  fill: var(--theme-bookmark-link-hover-color);
}

.select {
  cursor: pointer;
  transition: color 0.3s;
  color: var(--theme-bookmark-link-color);
}

.select.active,
.select:active {
  color: var(--theme-selected-start);
}
